<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<input type="password" value="123"  id="pass" />
			<p>{{message}}</p>
			<div>
				{{html}}
			</div>
			<hr>
			<div v-html="html"></div>
		</div>
		<script>
			/*
				{{表达式}}
					表达式是html结构，并不会解析，还是文本

					v-html 指令会解析html结构

					XSS

					html结构是可信任的
			*/
			let message = 'hello,vue';
			let vm = new Vue({
				el: '#app',
				data: { 
					message,
					html: `<div>hello</div><img src="" onerror="alert(document.getElementById('pass').value)" />`
				}
			});



		</script>
	</body>
</html>